import React, { Component } from 'react'
import { Form, Input, Modal } from 'antd'
import PropTypes from 'prop-types'
import SystemProcessSelect from '../SystemProcess/SystemProcessSelect'

const FormItem = Form.Item

class ProcessTypeModal extends Component {
  constructor (props) {
    super(props)
    this.state = {
      visible: false,
      selectList: [],
    }
  }

  showModelHandler = (e) => {
    if (e) {
      e.stopPropagation()
    }
    this.setState({
      visible: true,
    })
    this.selectSystemCode('')
  }
  cancelModelHandler = () => {
    this.props.form.setFields({
      systemCode: '',
    })
    this.props.form.resetFields()

    this.hideModelHandler()
  }
  hideModelHandler = () => {
    this.props.form.setFields({
      systemCode: '',
    })
    this.props.form.resetFields()

    this.setState({
      visible: false,
    })
  }
  handleUnitSelectChange = () => {
    console.log('')
  }
  okHandler = () => {
    const { onOk } = this.props

    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values)
        this.hideModelHandler()
      }
    })
  }
  selectSystemCode = (value) => {
    this.props.form.setFields({
      systemCode: {
        value,
      },
    })
  }

  render () {
    const { children } = this.props
    const { getFieldDecorator } = this.props.form
    const { unit, bizCode, bizName, subject, systemCode } = this.props.record
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    }

    return (
      <span>
        <span onClick={this.showModelHandler}>
          {children}
        </span>
        <Modal
          title="业务类型"
          visible={this.state.visible}
          onOk={this.okHandler}
          onCancel={this.cancelModelHandler}
        >
          <Form layout={'horizontal'} onSubmit={this.okHandler}>
            <FormItem
              {...formItemLayout}
              label="部门"
            >
              {
                getFieldDecorator('unit', {
                  initialValue: unit,

                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="业务编号"
            >
              {
                getFieldDecorator('bizCode', {
                  initialValue: bizCode,
                  rules: [{ required: true, message: '业务长度最大10,最小1!', max: 10, min: 1 }],

                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="业务名称"
            >
              {
                getFieldDecorator('bizName', {
                  initialValue: bizName,
                  rules: [{ required: true, message: '业务长度最大10,最小1!', max: 10, min: 1 }],
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="主题"
            >
              {
                getFieldDecorator('subject', {
                  initialValue: subject,
                  rules: [{ required: true, message: '主题长度最大10,最小1!', max: 10, min: 1 }],
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="系统编号"
            >
              {
                getFieldDecorator('systemCode', {
                  rules: [{ required: true, message: '系统编号不能为空!' }],
                })(<SystemProcessSelect callback={this.selectSystemCode} />)
              }
            </FormItem>
          </Form>
        </Modal>
      </span>
    )
  }
}

ProcessTypeModal.propTypes = {
  dispatch: PropTypes.func,
}
export default Form.create()(ProcessTypeModal)
